<template>
  <!-- 页面容器，居中显示并添加内边距 -->
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6 text-center">Vue3 + Swiper轮播示例</h1>

    <!-- Swiper轮播组件 -->
    <!-- 引入Swiper模块 -->
    <!-- 每次显示1个滑块 -->
    <!-- 开启循环播放 -->
    <!-- 自动播放，间隔3秒 -->
     
    <swiper :modules="modules" :slides-per-view="1" :loop="true" :autoplay="{ delay: 1000 }" class="mySwiper">
      <!-- 动态生成轮播滑块 -->
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <!-- 滑块容器，应用不同的背景颜色 -->
        <div class="slide-container" :class="`bg-${slide.bgColor}`">
          <!-- 轮播图片 -->
          <img :src="slide.image" :alt="slide.alt" class="slide-image">
          <!-- 图片上方的文字内容 -->
          <div class="slide-content">
            <h3 class="slide-title">{{ slide.title }}</h3>
            <p class="slide-description">{{ slide.description }}</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<!-- 
  1.引入swiper组件和模块
  2.注册Swiper组件和模块
  3.根据具体需求，对轮播图配置参数，比如：是否循环播放、自动播放间隔时间、每次显示几个模块
  4.绑定轮播数据

 -->
<script setup>
import { ref } from 'vue';
// 引入Swiper组件和模块
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
// 引入Swiper样式
import 'swiper/css';
import 'swiper/css/autoplay';

// 注册Swiper模块
const modules = [Autoplay];

// 轮播数据：包含图片URL、描述、标题和背景色
const slides = ref([
  {
    image: 'https://picsum.photos/seed/slide1/800/400',
    alt: '第一张轮播图',
    title: '时尚运动鞋',
    description: '全新设计，卓越性能',
    bgColor: 'blue-500'
  },
  {
    image: 'https://picsum.photos/seed/slide2/800/400',
    alt: '第二张轮播图',
    title: '精美咖啡',
    description: '精选咖啡豆，口感醇厚',
    bgColor: 'brown-500'
  },
  {
    image: 'https://picsum.photos/seed/slide3/800/400',
    alt: '第三张轮播图',
    title: '智能手表',
    description: '全方位健康监测',
    bgColor: 'gray-700'
  }
]);
</script>

<style lang="scss" scoped>
// 轮播组件主样式
.mySwiper {
  height: 300px; // 设置轮播高度
  border-radius: 12px; // 圆角边框
  overflow: hidden; // 超出部分隐藏

  // 自定义分页指示器样式
  .swiper-pagination-bullet {
    background-color: white; // 指示器颜色
    opacity: 0.5; // 默认半透明

    // 激活状态下完全不透明
    &.swiper-pagination-bullet-active {
      opacity: 1;
    }
  }
}

// 单个轮播滑块样式
.slide-container {
  height: 100%; // 高度占满容器
  display: flex; // 使用flex布局
  align-items: center; // 垂直居中
  justify-content: center; // 水平居中
  position: relative; // 相对定位，作为子元素绝对定位的参考

  // 添加半透明遮罩层，增强文字可读性
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
  }
}

// 轮播图片样式
.slide-image {
  width: 100%; // 宽度占满容器
  height: 100%; // 高度占满容器
  object-fit: cover; // 保持图片比例，覆盖容器
}

// 轮播图文字内容样式
.slide-content {
  position: absolute; // 绝对定位在底部
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px; // 内边距
  // 从底部向上的渐变背景
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white; // 文字颜色

  // 标题样式
  .slide-title {
    font-size: 1.5rem; // 标题字体大小
    font-weight: bold; // 标题字体加粗
    margin-bottom: 5px; // 标题与描述间距
  }

  // 描述文字样式
  .slide-description {
    font-size: 1rem; // 描述文字大小
  }
}
</style>